<template>
  <el-dialog v-if="show" :visible.sync="show" width="680px" @close='dialogClose'
    :close-on-click-modal='false' :close-on-press-escape='false'>
    <h2 slot="title" class="tx-c">文件上传</h2>
    <el-form autocomplete="off" label-width="100px" class="form">
      <el-form-item label="验收报告" class="tip">
        <div style="width: 500px">
          <p>
            <el-upload multiple action="/" :on-change="onChangeFile" :on-remove="onRemoveFile" :auto-upload="false"
              :file-list='fileList'>
              <el-button size="medium" type="primary">选择文件</el-button>
            </el-upload>
          </p>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="flex-justify-bcenter">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="submit" :loading='btnLoading'>确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {debounce} from "@/utils/index";
  export default {
    name: 'acceptanceFiles',
    data() {
      return {
        show: false,
        fileList: [],
        btnLoading: false
      };
    },

    methods: {
      dialogClose() {
        this.fileList = []
        this.show = false
      },
      onChangeFile(file, fileList) {
        this.fileList.push(file)
      },
      onRemoveFile(file, fileList) {
        this.fileList = fileList
      },
      submit: debounce(function(){
        if(this.fileList.length === 0){
          this.$message.error('请上传文件')
          return
        }
        this.$emit('submit', this.fileList);
        this.btnLoading = true
      },800,true)
    },
  };
</script>